<template>
    <div>
        <van-list class="wrap" v-model="loading" :finished="finished" :offset="num" @load="onload">
            <div class="blo" v-for="(item,index) in demo" :key="index">
                <router-link :tag="div" class="img" :to='{name:"moViDe",params:{id:item.id,type:item.type}}'>
                    <img :src="item.imgUrl">
                    <span>{{item.title}}</span>
                </router-link>
                <div class="user">
                    <div class="zhubo">
                        <img :src="item.user.photo">
                        <span>{{item.user.userName}}</span>
                    </div>
                    <!-- 点赞 -->
                    <div class="guanzhu">
                        <!-- <img :src="item.isLike?love[1]:love[0]" @click="like(item.isLike,item.id)"> -->
                       <img :src="item.isLike?love[1]:love[0]" @click="dianzan(item.isLike,item.id,index)">
                        <span>{{item.likeNum}}</span>
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
import { url_13, url, url_32 } from "@/serviceAPI.config.js";
import store from "../../../vuex/store";
import { imgUrl } from "@/filter/filter.js";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      num: 300,
      div: "div",
      love: [
        require("../../../static/images/weixuanzhongzhuangtai.png"),
        require("../../../static/images/guanzhuxuanzbongzhuangtai.png")
      ],
      demo: [],
      loading: false,
      finished: false,
      pageNum: 1,
      photo: require("../../../static/images/touxiang.png"),
      uid: null
    };
  },
  filters: {
    picUrl(url) {
      return imgUrl(url);
    }
  },
  store,
  computed: mapState(["idx"]),
  methods: {
    ...mapMutations(["setIdx"]),
    onload() {
      if (!!localStorage["user"]) {
        this.uid = JSON.parse(localStorage["user"]).id;
      }
      this.axios({
        method: "get",
        params: {
          userId: this.uid,
          pageNum: this.pageNum
        },
        url: url_32
      }).then(res => {
        if (res.data.code == 100) {
          for (let item of res.data.data) {
            item.imgUrl = url + item.imgUrl.split(","[0]);
            if (item.user.photo) {
              item.user.photo = url + item.user.photo;
            } else {
              item.user.photo = this.photo;
            }
          }
          this.pageNum++;
          this.demo = this.demo.concat(res.data.data);
          this.loading = false;
          this.$toast.clear();
          if (res.data.data.length < 10) {
            this.$toast({
              message: "官人，没有数据啦",
              duration: "500"
            });
            this.finished = true;
          }
        }
      });
    },
    // 点赞
    dianzan(bool, idx, index1) {
      if (localStorage["Token"]) {
        if (bool) {
          this.$toast({
            mask: true,
            message: "您已经点过赞了",
            // duration: "50000"
            duration: "500"
          });
        } else {
          this.axios({
            method: "post",
            data: {
              userId: JSON.parse(localStorage["user"]).id,
              issueId: idx
            },
            url: url_13
          }).then(res => {
            if (res.data.code == 100) {
              this.demo[index1].likeNum++;
              this.demo[index1].isLike = true;
              this.$toast({
                mask: true,
                message: res.data.msg,
                // duration: "50000"
                duration: "500"
              });
            } else {
              this.$toast({
                mask: true,
                message: res.data.msg,
                // duration: "50000"
                duration: "1000"
              });
            }
          });
        }
      } else {
        this.$dialog
          .confirm({
            message: "登录才能点赞",
            showCancelButton: true,
            confirmButtonText: "去登陆"
          })
          .then(() => this.$router.push("/login"))
          .catch(() => {});
      }
    }
  },
  created() {
    this.setIdx("0");
    this.$toast.loading({
      mask: true,
      message: "加载中...",
      // duration: "50000"
      duration: "10000"
    });
    // this.onload()
  }
};
</script>

<style scoped rel="stylesheet/less" lang="less">
p {
  font-size: 20px;
  color: blue;
}
h3 {
  font-size: 20px;
  color: red;
}
.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0.1rem 50px;
  .blo {
    width: 3.55rem;
    margin-top: 10px;
    border-radius: 0.2rem;
    background-color: white;
    overflow: hidden; // flex: 1;
    .img {
      position: relative;
      img {
        display: block;
        width: 3.55rem;
        height: 5.05rem;
        border-radius: 0.2rem 0.2rem 0 0;
      }
      span {
        position: absolute;
        bottom: 0.16rem;
        left: 0.21rem;
        font-size: 0.24rem;
        font-family: PingFang-SC-Light;
        color: #ffffff;
      }
    }
    .user {
      display: flex;
      height: 0.6rem;
      line-height: 0.6rem;
      text-align: left;
      .zhubo {
        flex: 1;
        img {
          width: 0.44rem;
          height: 0.45rem;
          margin: 0 0.17rem 0 0.13rem;
        }
        span {
          font-family: PingFang-SC-Regular;
          font-size: 0.24rem;
          color: black;
          font-weight: bold;
        }
      }
      .guanzhu {
        flex: 1;
        img {
          width: 0.41rem;
          height: 0.36rem;
          margin: 0 0.17rem 0 0.13rem;
        }
        span {
          font-family: PingFang-SC-Light;
          font-size: 0.24rem;
          color: #ccc;
        }
      }
    }
  }
}
</style>